<!--{template pc/frame/header_simple_start}-->
<script type="text/javascript" src="{MOD_PATH}/js/pc/plug/sortable.min.js?{VERHASH}"></script>
<link rel="stylesheet" type="text/css" href="{MOD_PATH}/css/pc/admin.css?{VERHASH}"/>
<!--{template pc/frame/header_simple_end}-->
<style type="text/css">
	.el-select-dropdown__wrap.el-scrollbar__wrap {
	    overflow-x: scroll;
	}
</style>
<div id="dzzoffice">
	<el-container>
		<el-header height="auto" style="padding: 0;z-index: 10;">
			<page-header :isscreenshow="false"></page-header>
		</el-header>
		<el-container>
		    <el-aside width="260px">
				<!--{template pc/page/adminLeft}-->
			</el-aside>
		    <el-main>
				<div class="page-content">
					<div id="center_title">
						筛选器设置
						<el-select 
							style="margin-left:8px;" 
							class="maxWidth" 
							v-model="librarySelect.value" 
							placeholder="请选择" 
							@change="handleLibraryChange">
						    <el-option key="all" label="全部库" value="all"></el-option>
							<!--{loop $applist $value}-->
							<el-option key="$value[appid]" label="$value[appname]" value="$value[appid]"></el-option>
							<!--{/loop}-->
						</el-select>
					</div>
					<el-scrollbar class="page-component__scroll">
						<div class="content" style="padding: 16px 25px;">
							<p class="tipTxt" style="margin-top: 0px;margin-bottom: 6px;">注：每个库可以定义独立的筛选器，如不设置会自动采用所有库的筛选设置</p>
							<el-checkbox-group v-model="formdata.checkeds" @change="handleChange">
								<div id="SortableBox">
									<template v-for="item in formdata.datas">
										<template v-if="item.key=='classify'&&librarySelect.value!='all'">
											<div class="lable-list" :key="item.key">
												<el-checkbox border :label="item.key" name="type">{{item.text}}</el-checkbox>
											</div>
										</template>
										<template v-else>
											<div class="lable-list" :key="item.key">
												<el-checkbox border :label="item.key" name="type">{{item.text}}</el-checkbox>
												<template v-if="librarySelect.value!='all'&&item.key=='tag'&& formdata.checkeds.indexOf('tag')>-1 && taggroup.length">
													<el-radio-group v-model="showtaggroup" @change="handleChange" style="margin-left: 16px;">
														<el-radio border :label="0">默认</el-radio>
														<el-radio border :label="1">展示分类</el-radio>
													</el-radio-group>
													<div v-show="showtaggroup==1" id="GroupBox" class="clearfix" ref="SortableClassif" style="padding-left: 136px;">
														<div v-for="fitem in taggroup" :key="fitem.cid" class="sortable-list">
															<el-checkbox-group v-model="formdata.tagcheckeds" @change="handleChange">
																<el-checkbox border :label="fitem.cid" v-cloak>{{fitem.catname}}</el-checkbox>
															</el-checkbox-group>
														</div>
													</div>
													
												</template>
											</div>
										</template>
									</template>
									
								</div>
							</el-checkbox-group>
						</div>
					</el-scrollbar>
				</div>
						
			</el-main>
		  </el-container>
	</el-container>
</div>
<!--{template pc/components/headerAdmin/index}-->
<script type="text/javascript">
	new Vue({
		el: '#dzzoffice',
		data() {
			return {
				formdata:{
					checkeds:[],
					datas:[],
					tagcheckeds:[]
				},
				showtaggroup:0,
				taggroup:[],
				librarySelect:{
					value:'all'
				},
				screens:[
					{key:'classify',text:'分类',checked:1},
					{key:'tag',text:'标签',checked:0},
					{key:'color',text:'颜色',checked:0},
					{key:'link',text:'链接',checked:0},
					{key:'desc',text:'注释',checked:0},
					{key:'duration',text:'时长',checked:0},
					{key:'size',text:'尺寸',checked:0},
					{key:'ext',text:'类型',checked:0},
					{key:'shape',text:'形状',checked:0},
					{key:'grade',text:'评分',checked:0},
					{key:'btime',text:'添加时间',checked:0},
					{key:'dateline',text:'修改日期',checked:0},
					{key:'mtime',text:'创建日期',checked:0},
				],
			}
		},
		watch:{
			showtaggroup:{
				handler(val){
					var self = this;
					if(val){
						self.$nextTick(function(){
							self.handleTagGroupSortable();
						});
					}
				},
				deep:true
			}
		},
		mixins:[LeftMixin],
		created() {
			this.handleGetData('all');
		},
		methods: {
			handleGetData(appid){
				var self = this;
				$.post(MOD_URL+'&op=admin&do=fileterset',{
					appid:appid
				},function(data){
					var newlist = [];
					var newlist1 = [
						{key:'classify',text:'分类',checked:1}
					];
					for(var l in data.data){
						var litem = data.data[l];
						
						litem['checked'] = parseInt(litem['checked']);
						if(appid =='all'){
							newlist1.push(litem);
						}
						if(litem.key == 'tag'){
							litem['showtype'] = parseInt(litem['showtype']);
							if(litem['showtype']){
								self.showtaggroup = 1;
							}else{
								self.showtaggroup = 0;
							}
						}
						newlist.push(litem);
					}
					if(appid =='all'){
						self.screens = newlist1;
					}
					var list = newlist;
					var checks = [];
					var taggroup = [];
					if(list && list.length){
						for(var x in list){
							if(parseInt(list[x].checked)){
								checks.push(list[x].key);
							}
							
							if(appid!='all' && list[x].key == 'tag'){
								if(list[x].group){
									var cids = [];
									for(var g in list[x].group){
										var gitem = list[x].group[g];
										var status = false;
										var gid = '';
										data.catdata.find(function(val){
											if(val['cid'] == gitem['cid']){
												status = true;
												gid = val['cid'];
											}
										});
										if(status){
											gitem['checked'] = parseInt(gitem['checked']);
											cids.push(gitem.cid);
											if(gitem['checked']){
												self.formdata.tagcheckeds.push(gitem.cid)
											}
											taggroup.push(gitem);
										}
									}
									if(data.catdata.length > cids.length){
										for(var n in data.catdata){
											var nitem = data.catdata[n];
											if(cids.indexOf(nitem.cid)<0){
												nitem['checked'] = 0;
												taggroup.push(nitem);
											}
										}
									}
								}else{
									for(var g in data.catdata){
										var gitem = data.catdata[g];
										gitem['checked'] = 0;
										taggroup.push(gitem);
									}
								}
								
							}
						}
					}else{
						list = JSON.parse(JSON.stringify(self.screens));
						for(var x in list){
							if(parseInt(list[x].checked)){
								checks.push(list[x].key);
							}
						}
						taggroup = data.catdata;
					}
					self.taggroup = taggroup;
					self.formdata.checkeds = checks;
					self.formdata.datas = list;
				},'json');
			},
			handleLibraryChange(val){
				this.handleGetData(val);
			},
			handleChange(){
				this.handleSubmit();
			},
			handleSubmit() {
				var self = this;
				var str = {
					pichomefilterfileds:[]
				}
				var taggroup = [];
				if(self.librarySelect.value!='all' && self.showtaggroup && self.taggroup.length){
					for(var t in self.taggroup){
						var titem = self.taggroup[t];
						if(self.formdata.tagcheckeds.indexOf(titem.cid)>-1){
							titem['checked'] = 1;
						}else{
							titem['checked'] = 0;
						}
						taggroup.push(titem)
					}
				}
				for(var index in self.formdata.datas){
					var ditem = self.formdata.datas[index];
					
					if(self.formdata.checkeds.indexOf(ditem.key)>-1){
						ditem['checked'] = 1;
					}else{
						ditem['checked'] = 0;
					}
					if(ditem.key == 'tag'){
						ditem.showtype = self.showtaggroup;
						if(taggroup.length){
							
							ditem['group'] = taggroup;
						}
					}
					str.pichomefilterfileds.push(ditem);
				}
				$.post(MOD_URL+'&op=admin&do=fileterset',{
					settingsubmit:true,
					formhash:'{FORMHASH}',
					appid:self.librarySelect.value,
					settingnew:str,
				},function(data){
					if(data){
						if(self.librarySelect.value =='all'){
							self.screens = [
								{key:'classify',text:'分类',checked:1}
							];
							str.pichomefilterfileds.find(function(xitem){
								self.screens.push({
									key:xitem.key,
									text:xitem.text,
									checked:xitem.checked,
								});
							});
						}
					}else{
						self.$message.error('保存失败');
					}
				},'json');
			},
			handleTagGroupSortable(){
				var _this = this;
				var el = document.getElementById('GroupBox');
				//设置配置
				var ops = {
					animation: 200,
					//拖动结束
					onEnd: function ({ newIndex, oldIndex }) {
						var val = _this.taggroup[oldIndex];
						_this.taggroup.splice(oldIndex, 1);
						_this.taggroup.splice(newIndex, 0, val);
						_this.handleSubmit();
					},};
				//初始化
				var sortable = Sortable.create(el, ops);
			}
		},
		mounted() {
			var _this = this;
			var el = document.getElementById('SortableBox');
			//设置配置
			var ops = {
				animation: 200,
				//拖动结束
				onEnd: function ({ newIndex, oldIndex }) {
					var val = _this.formdata.datas[oldIndex];
					_this.formdata.datas.splice(oldIndex, 1);
					_this.formdata.datas.splice(newIndex, 0, val);
					_this.handleSubmit();
				},};
			//初始化
			var sortable = Sortable.create(el, ops);
		}
	})
</script>

<!--{template pc/frame/footer_simple}-->
